<template>
    <div class = "basemanager">
    <template>
    <div class="block">
        <!-- <span class="demonstration">默认</span> -->
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        @change = "time">
        </el-date-picker>
    </div>
        </template>
        <div class = "myChanrt-wrapper">
        <div id="myChart" style="width:600px;height:500px;"></div>
    </div>
    </div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
    data(){
        return{
          value1: '',
          from: {
                data:[2,3,4,5,6],
                time:[1,2,3,4,5]
            }
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
    time(){
        // 请求阿贾克斯
        console.log(this.value1)
        this.from.data = '3'
        this.drawLine()
    },
      drawLine() {
      let myChart = echarts.init(document.getElementById('myChart'))
        //请求
      myChart.setOption({
          title: { text: '七天访问量' },
                tooltip: {},
                xAxis: {
                data: '1'
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                name: '访问量',
                type: 'bar',
                data: this.from.data
                }
            ] 
      })
    },
}
}
</script>
<style scoped>
.basemanager{
    width:100%;
}
.myChanrt-wrapper{
    width:600px;
    border-radius: 15px;
    box-shadow:0px 2px 16px 0px rgba(0, 0, 0, 0.1);
}
</style>
